<section class="search-section">
    <form class="form-inline" role="form" name="appForm">
        <table class="table-form tc">
            <tr>
                <td><label for="app-name">App Name</label></td>
                <td>
                    <input type="text" ng-model="queryParams.appName" class="form-control" id="app-name" placeholder="">
                </td>
                <td><label for="cu-reference">CU Reference</label></td>
                <td>
                    <input type="text" ng-model="queryParams.appCuReference" class="form-control" id="cu-reference"
                           placeholder=""></td>
                <td><label>App Source Channel</label></td>
                <td>
                    <div class="dropdown" name="channel" select-emu>
                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                            <span class="choosen-value">All Source Channel</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" ng-click="queryParams.sourceChannel = null">All Source
                                    Channel</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" ng-click="queryParams.sourceChannel = 1">Official
                                    Recommendation</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" ng-click="queryParams.sourceChannel = 2">Third Party
                                    Access</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" ng-click="queryParams.sourceChannel = 3">Free
                                    Developers</a>
                            </li>
                        </ul>
                    </div>
                </td>
                <td>
                    <button type="submit" class="btn btn-primary search-btn" ng-click="queryApp(1)"
                            ng-disabled="appForm.$invalid">Search
                    </button>
                </td>
            </tr>
            <tr>
                <td><label>Publish Status</label></td>
                <td>
                    <div class="dropdown" name="publishStatus" select-emu>
                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                            <span class="choosen-value">Please Select</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" ng-click="queryParams.releaseStatus = null">Please
                                    Select</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" ng-click="queryParams.releaseStatus = 1">Published</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1"
                                   ng-click="queryParams.releaseStatus = 0">Unpublished</a>
                            </li>
                        </ul>
                    </div>
                </td>
                <td><label>Label</label></td>
                <td>
                    <div class="dropdown" name="label" select-emu>
                        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                            <span class="choosen-value">Please Select</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" ng-click="queryParams.label = null">Please Select</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" ng-click="queryParams.label = 'Update'">Update</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" ng-click="queryParams.label = 'New'">New</a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
        </table>
    </form>

    <header class="main-content-header">
        <h5>Resource and Operation</h5>
    </header>
    <section class="operation">
        <button class="btn btn-success" ng-click="uploadApp()" id="upload-app-btn">Upload</button>
        <button class="btn btn-success" ng-click="showPublish()">Publish</button>
        <button class="btn btn-primary" ng-click="showUnpublish()">Unpublish</button>
        <button class="btn btn-primary" ng-click="deleteApp()">Delete</button>
        <button class="btn btn-primary" ng-click="showUpgrade()">Upgrade Rule</button>
        <a class="pull-right" add-host href="admin/#/recycle_bin">Go to Recycle Bin &gt;&gt;</a>
    </section>
    <section class="result">
        <table class="table table-result">
            <thead>
            <tr>
                <th width="7%">
                    <chkbox-all></chkbox-all>
                    All Select
                </th>
                <th width="4%">App ID</th>
                <th width="6%">App Name</th>
                <th width="5%">App Icon</th>
                <th width="5%">Label</th>
                <th width="8%">Publish Status</th>
                <th width="6%">APP Version</th>
                <th width="7%">OS Version</th>
                <th width="11%">Upload Time</th>
                <th width="11%">App Source Channel</th>
                <th width="5%">App Size</th>
                <th width="7%">Force install</th>
                <th width="7%">Upload user</th>
                <th width="5%">Sorting</th>
                <th width="6%">Operate</th>

            </tr>
            </thead>
            <tbody>
            <tr class="tr-container">
                <td colspan="100%">
                    <div class="tbody">
                        <table class="table table-striped" bindonce>
                            <tbody>
                            <tr ng-repeat="app in apps | orderBy:orderProp">
                                <td width="7%">
                                    <chkbox bo-attr bo-attr-data-id="app.id"></chkbox>
                                </td>
                                <td width="4%" bo-text="app.id"></td>
                                <td width="6%" bo-text="app.appName"></td>
                                <td width="5%"><img class="app-icon" bo-src="app.appIcon"></td>
                                <td width="5%" bo-text="app.label"></td>
                                <td width="8%">
                                    <a bo-class="{'reset-a':!app.releaseStatus}" bo-attr bo-attr-data-id="app.id"
                                       bo-attr-data-status="app.releaseStatus" ng-click="showPublishedCu($event)"
                                       bo-text="app.releaseStatusStr"></a>
                                </td>
                                <td width="6%" bo-text="app.versionName"></td>
                                <td width="7%" bo-text="app.appOsVersion"></td>
                                <td width="11%" bo-text="app.createTime"></td>
                                <td width="11%" bo-text="app.sourceChannelStr"></td>
                                <td width="5%" bo-text="app.appSize | size"></td>
                                <td width="7%" bo-text="app.installFlagStr"></td>
                                <td width="7%" bo-text="app.uploadUser"></td>
                                <td width="5%">
                                    <input type="text" bo-attr bo-attr-data-id="app.id"
                                           bo-attr-data-val="app.appSequence"
                                           class="update-sqc form-control" bo-value="app.appSequence"
                                           ng-blur="updateSqc($event)">
                                </td>
                                <td width="6%">
                                    <a class="modify-app decoration-none fa-wrap" title="Modify" bo-attr
                                       bo-attr-data-id="app.id" ng-click="modifyApp($event)">
                                        <i class="fa fa-edit"></i>
                                    </a>&nbsp;
                                    <a class="decoration-none fa-wrap" title="Download" bo-href="app.appUrl"><i
                                            class="fa fa-download"></i> </a>&nbsp;
                                    <a class="decoration-none fa-wrap" title="Info" bo-attr bo-attr-data-id="app.id" ng-click="showInfo($event)"><i
                                            class="fa fa-info-circle"></i> </a>
                                </td>
                            </tr>
                            <tr class="page-box">
                                <td colspan="12">
                                    <div class="pagination" id="pagination"></div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </section>
</section>

<!--modal-->

<!--upload app-->
<div class="modal fade" id="upload-app" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
    </button>
    <h4 class="modal-title">Upload App</h4>
</div>
<form>
<div class="modal-body clearfix">
<section class="form-section">
    <table class="table-form">
        <tr>
            <td><label>App Upload</label></td>
            <td>
                <input type="text" ng-value="newApp.appUrlUUID" ng-model="newApp.appUrlUUID"
                       class="form-control"
                       id="apk-url" placeholder="" readonly>
                <input type="file" id="apk">
            </td>
            <td>
                <button class="btn btn-primary on" id="choose-apk" title="Choose File">Path</button>
                <button class="btn btn-success" id="upload-apk" title="Upload File">Upload</button>
            </td>
        </tr>
        <tr>
            <td><label for="new-app-name">App Name</label></td>
            <td>
                <input type="text" ng-model="newApp.appName" class="form-control" id="new-app-name"
                       placeholder="">
            </td>
            <td></td>
        </tr>
        <tr>
            <td><label>Label</label></td>
            <td width="255px">
                <div class="dropdown" id="label-select" name="label" select-emu>
                    <button class="btn btn-default dropdown-toggle" type="button"
                            data-toggle="dropdown">
                        <span class="choosen-value">Update</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" ng-click="newApp.label = 'Update'">Update</a>
                        </li>
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" ng-click="newApp.label = 'New'">New</a>
                        </li>
                    </ul>
                </div>
            </td>
            <td></td>
        </tr>
        <tr>
            <td><label>Force Install</label></td>
            <td width="255px">
                <div class="radio-group">
                    <div class="custom-radio bordered {{newApp.installFlag === 0?'checked':''}}"
                         ng-click="newApp.installFlag = 0"><i></i></div>
                    <label ng-click="newApp.installFlag = 0">Normal install</label>

                    <div class="custom-radio bordered {{newApp.installFlag === 1?'checked':''}}"
                         ng-click="newApp.installFlag = 1"><i></i></div>
                    <label ng-click="newApp.installFlag = 1">Force install</label>
                </div>
            </td>
            <td></td>
        </tr>
        <tr>
            <td><label>App Source Channel</label></td>
            <td width="255px">
                <div class="dropdown" id="source-channel-select" name="sourceChannel" select-emu>
                    <button class="btn btn-default dropdown-toggle" type="button"
                            data-toggle="dropdown">
                        <span class="choosen-value">Official Recommendation</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" ng-click="newApp.sourceChannel = 1">Official
                                Recommendation</a>
                        </li>
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" ng-click="newApp.sourceChannel = 2">Third
                                Party
                                Access</a>
                        </li>
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" ng-click="newApp.sourceChannel = 3">Free
                                Developers</a>
                        </li>
                    </ul>
                </div>
            </td>
            <td></td>
        </tr>
        <tr>
            <td><label>Star Grade</label></td>
            <td>
                <div mark-star class="mark-star"></div>
            </td>
            <td></td>
        </tr>
        <tr>
            <td><label for="new-app-size">App Size</label></td>
            <td>
                <input type="text" ng-value="newApp.appSize | size" class="form-control"
                       id="new-app-size" readonly/>
            </td>
            <td></td>
        </tr>
        <tr>
            <td><label for="new-app-developer">Developer</label></td>
            <td>
                <input type="text" ng-model="newApp.appDeveloper" class="form-control"
                       id="new-app-developer"
                       placeholder="">
            </td>
            <td></td>
        </tr>
        <tr id="select-os-wrap" class="selectpicker-wrap">
            <td><label for="select-os-v">OS Version</label></td>
            <td>
                <select id="select-os-v" class="select-picker dropdown" multiple>
                    <option>Select All</option>
                    <option ng-repeat="os in osList">{{os.os}}</option>
                </select>
            </td>
            <td></td>
        </tr>
        <!--<tr id="select-cu-wrap">
            <td><label for="select-cu">CU Reference</label></td>
            <td>
                <select id="select-cu" class="select-picker" multiple data-live-search="true">
                    <option>Select All</option>
                    <option>NA</option>
                    <option>7041D-2FOTAZ7</option>
                </select>
            </td>
            <td></td>
        </tr>-->
        <tr>
            <td colspan="100%">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#app-detail" role="tab" data-toggle="tab">App Details</a>
                    </li>
                    <li role="presentation">
                        <a href="#permission-detail" role="tab" data-toggle="tab">All Permission
                            Details</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="app-detail">
                        <textarea class="detail" ng-model="newApp.appDetail"></textarea>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="permission-detail">
                        <textarea class="permission" ng-model="newApp.appPermission"
                                  readonly></textarea>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</section>
<section class="img-upload-section">
    <h5>App Icon <span></span></h5>

    <p class="small">(Sugest:512&times;512px jpg/png/gif &lt;800k)</p>

    <div class="app-icon-upload">
        <div class="upload-wrap">
            <div class="upload-area">
                <img id="app-icon-preview">

                <div class="cover"></div>
                <input type="file" id="app-icon"/>
            </div>
        </div>
    </div>
    <h5>App Screenshot</h5>

    <p class="small">(Sugest:480&times;800px jpg/png/gif &lt;300k)</p>

    <div class="app-ss-upload clearfix">
        <div class="upload-wrap" upload-wrap>
            <div class="upload-area">
                <img class="app-ss-preview">

                <div class="cover"></div>
                <input type="file" class="app-ss" id="app-ss-1"/>
            </div>
            <button type="button" class="close icon-delete"><span>×</span></button>
        </div>

        <div class="upload-wrap" upload-wrap>
            <div class="upload-area">
                <img class="app-ss-preview">

                <div class="cover"></div>
                <input type="file" class="app-ss" id="app-ss-2"/>
            </div>
            <button type="button" class="close icon-delete"><span>×</span></button>
        </div>

        <div class="upload-wrap" upload-wrap>
            <div class="upload-area">
                <img class="app-ss-preview">

                <div class="cover"></div>
                <input type="file" class="app-ss" id="app-ss-3"/>
            </div>
            <button type="button" class="close icon-delete"><span>×</span></button>
        </div>

        <div class="upload-wrap" upload-wrap>
            <div class="upload-area">
                <img class="app-ss-preview">

                <div class="cover"></div>
                <input type="file" class="app-ss" id="app-ss-4"/>
            </div>
            <button type="button" class="close icon-delete"><span>×</span></button>
        </div>
    </div>
</section>
<div class="modal-body-cover"></div>
</div>
<div class="modal-footer">
    <button type="submit" class="btn btn-primary btn-confirm btn-submit" id="save-app">OK</button>
    <button type="button" class="btn btn-default btn-confirm" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--upgrade rule-->
<div upgrade-rule-modal></div>

<!--publish app-->
<div publish-app-modal></div>

<!--published cu-->
<div published-cu-modal></div>

<!--show info-->
<div app-info-modal></div>

<!--confirm modal-->
<div confirm-modal></div>

<!--alert modal-->
<div alert-modal></div>